<template>
  <!-- 会员统计 -->

  <div>
    <!-- 时间戳 -->
    <div style="margin-bottom: 50px">
      <slot>
        <h3>会员统计</h3>
      </slot>
      <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="margin-right: 100px">
      </el-date-picker>
      <el-button type="primary" class="search-btn" @click="searchBtn1()">查询</el-button>
    </div>
    <!-- 主体部分 -->
    <el-row>
      <el-col :span="12">
        <div id="box"></div>
      </el-col>
      <el-col :span="12">
        <div id="box1"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { time } from "../../utli/commin.js";
export default {
  data() {
    return {
      sum: 0,
      updatas: 0, // 已上传
      noupdata: 0, //未上传
      saveAllList: [], //批量保存数组来自upload文件
      // 时间
      value2: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 表单
    };
  },
  created() {
    // //console.log(this.$store.state.saveData1);
    let arry = this.$store.state.saveData1;

    arry.forEach((item) => {
      if (item.markdownStatus == "报告已上传") {
        Number(this.updatas++);
      } else {
        Number(this.noupdata++);
      }
    });
  },

  methods: {
    searchBtn1() {
      this.sum = this.$store.state.sum;
      // //console.log(this.updatas);
      // //console.log("未上传；" + this.noupdata);
      // //console.log("sum", this.sum);

      //发起请求
      this.$axios({
        url: "/memberManager/memberStatistic",
        method: "post",
        data: {
          fromTime: time(this.value2[0]),

          toTime: time(this.value2[1]),
        },
      }).then((res) => {
        // //console.log(res);
        if (res.code === 0) {
          let num = res.data.length;
          //渲染图表二
          var myChart = this.$echarts.init(document.getElementById("box1"));
          myChart.setOption({
            title: {
              text: "时间段会员注册数",
              subtext: "",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },

            series: [
              {
                type: "pie",
                radius: "50%",
                data: [
                  {
                    value: num,
                    name: "本时间段注册数",
                    itemStyle: { color: "#CFB2A9" },
                  },
                  {
                    value: this.sum,
                    name: "总的会员数",
                    itemStyle: { color: "#FF8A5B" },
                  },
                  // { value: 580, name: "Email" },
                  // { value: 484, name: "Union Ads" },
                  // { value: 300, name: "Video Ads" },
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
          myChart.resize();
        } else {
          //console.log("加载失败");
        }
      });
      // //console.log(
      //   JSON.stringify({
      //     fromTime: time(this.value2[0]),

      //     toTime: time(this.value2[1]),
      //   })
      // );
      // 渲染图标  图一
      var myChart = this.$echarts.init(document.getElementById("box"));
      myChart.setOption({
        title: {
          text: "上传报告占比",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: this.updatas, name: "已上传报告" },
              { value: this.noupdata, name: "未上传报告" },
              // { value: 580, name: "Email" },
              // { value: 484, name: "Union Ads" },
              // { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      myChart.resize();
    },
  },
};
</script>

<style scoped>
#box {
  width: 50%;
  height: 500px;
  margin: 0 auto;
  margin-left: 0%;
  padding-left: 0%;
}

#box1 {
  width: 50%;
  height: 500px;
  margin: 0 auto;
  margin-left: 0%;
  padding-left: 0%;
}
</style>